<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--      筛选-->
      <!--      分栏24占满 -->
      <el-col :span="24" :xs="24">
        <el-form v-if="!loading" label-position="top" :rules="rules" :model="contestDate" ref="contestForm" size="small"  label-width="100px">
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="contestDate.title"
              placeholder="请输入标题"
              clearable
            />
          </el-form-item>
          <el-form-item label="比赛说明" prop="description">
            <md-editor ref="descriptionMd" :default-data="contestDate.description"/>
          </el-form-item>
          <el-row :gutter="20" :span="24">
            <el-col :span="12">
              <el-form-item label="类型" prop="auth">
                <el-select
                  v-model="contestDate.auth"
                  placeholder="选择权限"
                >
                  <el-option
                    v-for="dict in enums.COMPETITION_AUTH"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="contestDate.auth == 1" :span="12">
              <el-form-item label="密码" prop="pwd">
                <el-input placeholder="请输入密码" v-model="contestDate.pwd" show-password></el-input>
              </el-form-item>
            </el-col >
          </el-row>
          <el-row :gutter="20" :span="24">
            <el-col :span="12">
              <el-form-item label="比赛时间" prop="dateRange">
                <el-date-picker
                  v-model="dateRange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
            </el-col >
            <el-col :span="12">
              <el-form-item label="时长" prop="duration">
                <el-input  v-model="getDuration" disabled></el-input>
              </el-form-item>
            </el-col >
          </el-row>
          <el-row :gutter="20" :span="24">
            <el-col :span="12">
              <el-form-item label="赛制" prop="type">
                <el-select
                  v-model="contestDate.type"
                  placeholder="选择类型"
                >
                  <el-option
                    v-for="dict in enums.COMPETITION_TYPE"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col >
          </el-row>
          <el-row :gutter="20" :span="24">
            <el-col :span="12">
              <el-form-item label="开启封榜" prop="isRemoveEndBlank">
                <el-switch
                  v-model="contestDate.sealRank"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-col >
            <el-col :span="12">
              <el-form-item label="时长" prop="duration">
                <el-input  v-model="getDuration" disabled></el-input>
              </el-form-item>
            </el-col >
          </el-row>

          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="contestDate.status"
              :active-value="0"
              :inactive-value="1"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>

        </el-form>
      </el-col>
      <el-col :span="24">
        <el-button :loading="savaLoading" type="success" @click="savaContest" style="width: 100%">保存比赛</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MdEditor from '@/components/mdEditor'
import Reference from '@/components/Reference'
import Problem from '@/views/problem'
import * as contestApi from "@/api/contest"
import { calculateMatchDuration } from '@/utils/ruoyi'
export default {
  name: 'addProblem',
  components: { Problem, Reference, MdEditor },
  data(){
    return{
      loading:false,
      savaLoading:false,
      dateRange:[],
      contestDate : {
        title:undefined,
        description:undefined,
        auth:1,
        type:1,
        pwd:"",
        status:0,
        startTime:undefined,
        endTime:undefined,
        duration:undefined,
        sealRank:0,
      },

      rules: {
        title: {
          required: true,
          message: "标题不能不为空",
          trigger: "blur",
        },
        // description: {
        //   required: true,
        //   message: "描述不能为空",
        //   trigger: "blur",
        // },
        dateRange: {
          required: true,
          validator: this.validDateRange,
          trigger: "blur",
        },
      }
    }
  },
  computed:{

    getDuration(){
      if(this.dateRange && this.dateRange.length > 1){
        const date1 = new Date(this.dateRange[0]);
        const date2 = new Date(this.dateRange[1]);
        // 确保日期字符串是有效的
        if (isNaN(date1.getTime()) || isNaN(date2.getTime())) {
          return 0;
        }
        return calculateMatchDuration(date1,date2)
      }
      return 0;
    }
  },
  created() {
    const id = this.$route.query.id;
    console.log(id)
    if(id!=undefined && id!=null){
      this.loading = true;
      contestApi.query(id).then(res => {
        console.log(res)
        this.contestDate = res.data
        this.dateRange = [res.data.startTime,res.data.endTime]
      }).finally(() => {
        this.loading = false;
      })
    }
  },
  methods: {
    validDateRange(rule, value, callback) {
      if (this.dateRange == null || this.dateRange.length != 2) {
        callback(new Error('比赛时间不能为空！'));
      } else
        callback();
    },
    getSecondsDiff(date1,date2){
      // 计算秒数差值
      const millisecondsDiff = Math.abs(date1.getTime() - date2.getTime());
      const secondsDiff = Math.floor(millisecondsDiff / 1000);
      return secondsDiff
    },
    savaContest(){
      this.$refs["contestForm"].validate(valid => {
        this.contestDate.description = this.$refs.descriptionMd.getValue();
        this.contestDate.startTime = this.dateRange[0]
        this.contestDate.endTime = this.dateRange[1]
        this.contestDate.duration = this.getSecondsDiff(new Date(this.dateRange[0]),new Date(this.dateRange[1]))
        console.log(this.contestDate)
        if (valid) {
          this.savaLoading = true;
          contestApi.saveOrUpdate(this.contestDate).then(res => {
            this.$message.success("保存成功！")

          }).catch(err => {
          }).finally(() => {
            this.savaLoading = false;
          })
        }else{
          this.$message.error("校验失败！")
        }
      });
    },
  }
}
</script>

<style scoped>

</style>
